import * as THREE from 'three'
import createApp from '../../core'

function createPolarGridHelper (dom: HTMLElement) {
  const { camera, scene, gui } = createApp(dom)
  camera.position.set(-80, 120, 100)
  const lookAt = new THREE.Vector3()
  camera.lookAt(lookAt)

  const axesHelper = new THREE.AxesHelper(50)
  scene.add(axesHelper)
  const { radius, radials, circles, divisions, color1, color2 } = data
  let polarGridHelper = new THREE.PolarGridHelper(radius, radials, circles, divisions, color1, color2)
  scene.add(polarGridHelper)

  function refresh () {
    scene.remove(polarGridHelper)
    const { radius, radials, circles, divisions, color1, color2 } = data
    polarGridHelper = new THREE.PolarGridHelper(radius, radials, circles, divisions, color1, color2)
    scene.add(polarGridHelper)
  }

  const folder = gui.addFolder('相机观察的位置')
  folder.add(data, 'radius', 0, 500).onChange(refresh)
  folder.add(data, 'radials', 0, 100, 1).onChange(refresh)
  folder.add(data, 'circles', 0, 50, 1).onChange(refresh)
  folder.add(data, 'divisions', 3, 100, 1).onChange(refresh)
  folder.addColor(data, 'color1').onChange(refresh)
  folder.addColor(data, 'color2').onChange(refresh)
}

const data = {
  radius: 100,
  radials: 10,
  circles: 8,
  divisions: 64,
  color1: 0xff0000,
  color2: 0x0000ff
}

export {
  createPolarGridHelper
}
